<template>
  <div>
    <span style="color: rgb(116, 200, 233)">获取验证码({{ time }}s)</span>
  </div>
</template>

<script setup lang="ts" name="CountDown">
import { ref, watch } from 'vue'

// 定义倒计时的时间
let time = ref(30)
// 接收父组件传递的是否处于倒计时的状态
let props = defineProps(['timeFlag'])
// 声明父组件绑定的自定义事件
let emit = defineEmits(['change-time'])
// 监听付组件传递的props数据的变化
watch(
  () => props.timeFlag,
  (newValue) => {
    // 处于倒计时状态
    if (newValue) {
      time.value = 30
      // 开启定时器
      let timer = setInterval(() => {
        if (time.value > 0) {
          time.value--
        } else {
          // 清除定时器
          clearInterval(timer)
          // 触发自定义事件将newValue变为false 变为非倒计时状态
          emit('change-time')
        }
      }, 1000)
    }
  },
  {
    // 要立即执行一次,否则不会监听到第一次值的变化
    immediate: true,
  },
)
</script>

<style scoped lang="scss"></style>
